<template>
  <el-form
    ref="ruleFormRef"
    :model="form"
    :rules="rules"
    label-width="0"
    size="large"
    @keyup.enter="login(ruleFormRef)"
  >
    <el-form-item prop="username">
      <el-input v-model="form.username" prefix-icon="user" clearable placeholder="请输入用户名">
      </el-input>
    </el-form-item>

    <el-form-item prop="password">
      <el-input
        v-model="form.password"
        prefix-icon="lock"
        clearable
        show-password
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>

    <el-form-item>
      <div class="boxCode">
        <el-input
          v-model="form.captcha"
          prefix-icon="CircleCheck"
          clearable
          placeholder="请输入验证码"
        ></el-input>
        <el-image :src="captchaUrl" @click="getCaptcha" class="code"></el-image>
      </div>
    </el-form-item>

    <div class="rememberMe">
      <div>
        <el-checkbox label="记住密码" />
      </div>
      <div>
        <router-link to="/reset_password">忘记密码？</router-link>
      </div>
    </div>

    <el-form-item>
      <el-button
        type="primary"
        :loading="isLogin"
        style="width: 100%"
        round
        @click="login(ruleFormRef)"
        >登录</el-button
      >
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeMount } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { captchaImage, loginByJson } from '@api/login'
//引入加密
import { Encrypt } from '@utils/aes'
//引入类型
import { UserRuleForm } from '@interface/login'
//引入路由
import { useRouter } from 'vue-router'
const router = useRouter()
//引入hooks
import useLogin from '@hooks/useLogin'

//验证码url
let captchaUrl = ref<string>('')

const ruleFormRef = ref<FormInstance>()

const form = reactive<UserRuleForm>({
  username: '',
  password: '',
  captcha: '',
  key: ''
})

const rules = reactive<FormRules<UserRuleForm>>({
  username: [{ required: true, message: '正确用户名', trigger: 'blur' }],
  password: [{ required: true, message: '正确密码', trigger: 'blur' }]
})
//生命周期
onBeforeMount(() => {
  getCaptcha()
})
//动态获取验证码
const getCaptcha = async () => {
  //获取当前时间
  const key: string = new Date().getTime().toString()
  form.key = key
  const res = await captchaImage({ key })
  let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
  let imgUrl = URL.createObjectURL(blob)

  captchaUrl.value = imgUrl
}
//点击登录加载状态
const isLogin = ref<boolean>(false)
//点击登录
const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      isLogin.value = true
      //校验通过
      let res = await loginByJson({
        username: Encrypt(form.username),
        password: Encrypt(form.password),
        captcha: form.captcha,
        key: form.key
      })

      //登录成功或不成功,这时也需要关闭lodding加载状态
      isLogin.value = false
      //调用hooks
      useLogin(res)
    } else {
      //校验不通过
      return ElMessage.warning('请填写正确的内容')
    }
    return
  })
}
</script>

<style scoped>
.boxCode {
  display: flex;
  align-items: center;
  width: 100%;
}
.code {
  margin-left: 10px;
  height: 40px;
  width: 100px;
  cursor: pointer;
}
.rememberMe {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
</style>
